<template>
  <mt-loadmore :topMethod="loadTop" style="margin-top:0.7rem;margin-bottom: 1.3rem;" ref="loadmore">
    <div class="order_list" v-for="item in orderlist" :key="item.id">
      <p><span>{{item.hash.intime}}</span>
        <span>{{item.hash.statusname}}</span>
      </p>
      <p>
        <ul>
          <li>
            <span>{{item.hash.pname}}{{item.hash.fromat}}({{item.hash.tastename}},{{item.hash.fixingname}})<b v-if="item.hash.number>1">...</b></span>
          </li>
        </ul>
        <span>共{{item.hash.number}}件商品，金额<i style="font-size:0.3rem">￥{{item.hash.amount}}</i></span>
      </p>
      <p>
        <span @click="goOrderdetail(item)">查看订单</span>
        <span v-if="item.hash.status=='0'" style="color:#fff;border:none;background:#26a2ff">支付</span>
      </p>
    </div>
  </mt-loadmore>
</template>

<script>
export default {
  data() {
    return {
      selected: '0',
      ts: this.newStore(),
      orderlist: [],
    };
  },
  created() {
    this.getOrderlist();
  },
  methods: {
    loadTop() {
      setTimeout(() => {
        this.getOrderlist();
        this.$refs.loadmore.onTopLoaded();
      }, 500);
    },
    getOrderlist() {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A6559B7AE69B5ABEA2D70957E9CAEEFD2E850E6FAF78656B7E1',
        start: 0,
        limit: 1,
        systype: 1,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.orderlist = ts.d.data.operation1;
        for (let i = 0; i < this.orderlist.length; i += 1) {
          this.orderlist[i].hash.intime = `${new Date(this.orderlist[i].hash.intime * 1000).toLocaleDateString().replace(/\//g, '-')} ${new Date(this.orderlist[i].hash.intime * 1000).toTimeString().substr(0, 8)}`;
        }
      });
    },
    goOrderdetail(item) {
      this.$router.push({
        name: 'orderDetail',
        query: {
          status: item.hash.status,
          type: item.hash.type,
          statusname: item.hash.statusname,
          orderid: item.hash.orderid,
        },
      });
    },
  },
};
</script>

<style lang="stylus">
.mint-navbar
  background #26a2ff
  a
    color #fff
  .mint-tab-item-label
    font-weight bold
    font-size 0.25rem
.mint-navbar .mint-tab-item.is-selected
  border-bottom: 3px solid #ddd
  margin-bottom 0
  color #fff
.order_list

  padding 0.1rem 0.2rem
  border-radius: 0.05rem;
  box-shadow 0px 0px 0px 1px #f1f1f1
  width: 96%;
  margin: 0.2rem auto

  p
    &:nth-child(1)
      height 0.6rem
      line-height 0.6rem
      margin-bottom 0.5rem
      border-bottom 1px solid #f1f1f1
      span
        &:first-child
          font-size:0.26rem
          color:#aaa
        &:last-child
          color #26a2ff
    span
      &:nth-child(1)

        max-width 80%
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space:nowrap;
        display:inline-block;
      &:nth-child(2)
        float right
    &:nth-child(2)
      ul
        max-height: 1.4rem;
        overflow: auto;
        padding-bottom 0.2rem
        li
          height 0.4rem
          line-height 0.4rem
          span
            &:nth-child(1)
              overflow: hidden;
              min-width 80%
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              white-space:nowrap;
    &:nth-child(3)
      margin 0.4rem 0 0 0
      padding-top 0.1rem
      span
        display inline-block
        padding 0.15rem 0.3rem
        border 1px solid #ddd
        background #fffbfb
</style>

